<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link type="text/css" rel="stylesheet" href="${ctx}/MAdmin/vendors/bootstrap/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="${ctx}/MAdmin/css/themes/style1/orange-blue.css" class="default-style">
<!-- 隐藏div 显示出来必备1/2 -->
<script src="${ctx}/MAdmin/js/jquery-1.10.2.min.js"></script>
<script src="${ctx}/MAdmin/vendors/bootstrap/js/bootstrap.min.js"></script>
<!-- 下拉框 -->
<link type="text/css" rel="stylesheet" href="${ctx}/MAdmin/vendors/select2/select2-madmin.css">
<link type="text/css" rel="stylesheet" href="${ctx}/MAdmin/vendors/bootstrap-select/bootstrap-select.min.css">
<link type="text/css" rel="stylesheet" href="${ctx}/MAdmin/vendors/multi-select/css/multi-select-madmin.css">
<script src="${ctx}/MAdmin/vendors/select2/select2.min.js"></script>
<script src="${ctx}/MAdmin/vendors/bootstrap-select/bootstrap-select.min.js"></script>
<script src="${ctx}/MAdmin/vendors/multi-select/js/jquery.multi-select.js"></script>
<script src="${ctx}/MAdmin/js/ui-dropdown-select.js"></script>
<!-- 校验 -->
<script src="${ctx}/MAdmin/vendors/jquery-validate/jquery.validate.min.js"></script>
<script src="${ctx}/MAdmin/js/form-validation.js"></script>
<!-- 提示框 -->
<link  href="${ctx}/MAdmin/vendors/jquery-toastr/toastr.min.css" type="text/css" rel="stylesheet" >
<script src="${ctx}/MAdmin/vendors/jquery-toastr/toastr.min.js"></script>
<!-- 表格 -->
<link  href="${ctx}/MAdmin/vendors/DataTables/media/css/jquery.dataTables.css" type="text/css" rel="stylesheet" >
<link  href="${ctx}/MAdmin/vendors/DataTables/media/css/dataTables.bootstrap.css" type="text/css" rel="stylesheet"  >
<script src="${ctx}/MAdmin/vendors/DataTables/media/js/jquery.dataTables.js"></script>
<script src="${ctx}/MAdmin/vendors/DataTables/media/js/dataTables.bootstrap.js"></script>
<!-- 树形列表 -->
<link type="text/css" rel="stylesheet" href="${ctx}/MAdmin/vendors/jstree/dist/themes/default/style.min.css">
<link type="text/css" rel="stylesheet" href="${ctx}/MAdmin/vendors/jquery-treetable/stylesheets/jquery.treetable.css">
<link type="text/css" rel="stylesheet" href="${ctx}/MAdmin/vendors/jquery-treetable/stylesheets/jquery.treetable.theme.custom.css">
<script src="${ctx}/MAdmin/vendors/jstree/dist/jstree.min.js"></script>
<script src="${ctx}/MAdmin/vendors/jquery-treetable/javascripts/src/jquery.treetable.js"></script>
<!-- page js -->
<script src="${ctx}/js/custom-validate.js"></script><!-- 自定义校验 -->
<script src="${ctx}/js/custom-jsutil.js"></script><!-- 自定义通用工具 -->
<script src="${ctx}/js/sys_menu.js"></script>

<script type="text/javascript">$.ctx = "${ctx}";</script>

</head>
<body>
	
	<div class="col-xs-5">
		<div class="panel">
		    <div class="panel-body">
				<button type="button" data-target="#modal-static" data-toggle="modal" class="btn btn-success" >增加目录</button>
				<hr>
			    <div id="family-tree-vertical" class="family-tree-vertical">
					<!-- 加载前显示loading图标 -->
					<img class="img-responsive" src="${ctx}/MAdmin/vendors/pageloader/images/loader1.GIF">
				</div>
		    </div>
		</div>
	</div>
	
	<div class="col-xs-6">
		<div class="panel">
		    <div class="panel-body">
		  		请选择点击左侧，修改、删除 您想要操作的 目录菜单。
		  		<hr>
		  		<form id="pageInfo" action="#" class="form-horizontal form-bordered">
                <div class="form-body">
                    <div class="form-group">
                        <label class="col-md-3 control-label">菜单等级：</label>
                        <div class="col-md-8">
                            <input id="editMenuLvName" type="text"  class="form-control" readonly="readonly">
                            <input id="editMenuLv" type="hidden" >
                            <input id="editMenuId" type="hidden" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">从属1级菜单：</label>
                        <div class="col-md-8">
                        	<input id="editRelyMenuLv1" type="text" class="form-control" readonly="readonly" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">从属2级菜单：</label>
                        <div class="col-md-8">
                        	<input id="editRelyMenuLv2" type="text" class="form-control" readonly="readonly">
                        </div>
                    </div>
                   	<div id="editMenuUrlDiv" class="form-group" style="display: none;">
                        <label class="col-md-3 control-label">页面 URL：</label>
                        <div class="col-md-8">
                        	<input id="editMenuUrl" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">菜单中文名称：</label>
                        <div class="col-md-8">
                        	<input id="editMenuName" type="text" class="form-control">
                        </div>
                    </div>
                	<div class="form-group">
                        <label class="col-md-3 control-label">排序数字:</label>
                        <div class="col-md-8">
                        	<input id="editMenuSort" type="text" class="form-control">
                        </div>
                    </div>
                    
                </div>
                <div class="panel-body">
                	<span style="float:left;"><button type="button" data-target="#modal-confirm" data-toggle="modal" class="btn btn-primary">删除</button></span>
                	<span style="float:right;"><button type="button" onclick="javascript:updateMenu();" class="btn btn-success">保存</button></span>
                </div>
                <div style="display: inline">
                </div>
		  		</form>
		    </div>
		</div>
       
       <div id="menulv4infodiv" class="portlet box portlet-blue" style="display: none;">
           <div class="portlet-header">
           	<div class="caption">页面功能</div>
           	<div class="actions">
           		<a id="menulv4infoa" href="javascript:void(0);" onclick="javascript:$('#updateActionButton').hide();$('#createActionButton').show();" data-target="#pagefunctiondiv" data-toggle="modal"  class="btn btn-sm btn-white">新增</a>
            </div>
           </div>
           <div class="portlet-body">
               <table id="menulv4info" class="table table-hover table-striped table-bordered table-advanced tablesorter display">
               <thead>
			   	<tr>
		            <th>功能名称</th>
		            <th>按钮</th>
		            <th>排序</th>
		            <th>操作</th>
			   	</tr>
			   </thead>
               </table>
           </div>
       </div>
                            
	</div>
	
	

	<!-- 新增 1,2,3级目录 隐藏DIV -->
	<div id="modal-static" tabindex="-1" role="dialog" aria-labelledby="modal-responsive-label" aria-hidden="false" class="modal fade in">
		<div class="modal-dialog">
		    <div class="modal-content" style="width: 800px;">
		    <form action="#" class="form-validate">
		        <div class="modal-header">
		            <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
		            <h4 id="modal-responsive-label" class="modal-title">请选择您要创建的菜单等级，并填写名称、排序号：</h4>
		        </div>
		        <div class="modal-body">                   
                   <div class="row">
                       <div class="col-md-5">
                        <!-- 举例 -->
						<div class="family-tree-vertical">
						<ul><li><a href="#">举例：发布系统</a>
							<ul><li><a href="#">一级菜单</a><ul>
								<li><a href="#">二级菜单</a>
									<ul><li ><a href="#">三级菜单</a></li></ul></li>
							</ul></li></ul></li></ul>
						</div>
                       </div>
                       <div class="col-md-7" >
                       	<form class="form-horizontal form-bordered"></form><!-- 单纯的, 防止格式错乱 -->
                        
                        <form id="menuform" role="form" class="form-horizontal form-separated">
                           <div class="form-body">
                               <div class="form-group">
                                   <label class="col-md-3 control-label">菜单等级：</label>
                                   <div class="col-md-9">
                                       <select id="level" name="level" data-style="btn-white" onchange="selectMenuLv(this);" data-width="240px" class="selectpicker form-control show-menu-arrow">
						                   <option value="1">一级菜单</option>
						                   <option value="2">二级菜单</option>
						                   <option value="3">三级菜单</option>
					               		</select>
                                   </div>
                               </div>
                               <div id="menulv1div" class="form-group" style="display: none;">
                                   <label class="col-md-3 control-label">从属一级菜单：</label>
                                   <div class="col-md-9">
                                       <select id="menulv1" name="menulv1" data-style="btn-white" onchange="getLv2MenuData(this);" data-width="240px" class="selectpicker form-control show-menu-arrow">
					               		</select>
                                   </div>
                               </div>
                               <div id="menulv2div" class="form-group" style="display: none;">
                                   <label class="col-md-3 control-label">从属二级菜单：</label>
                                   <div class="col-md-9">
                                       <select id="menulv2" name="menulv2" data-style="btn-white" onchange="selectMenuLv(this);" data-width="240px" class="selectpicker form-control show-menu-arrow">
					               		</select>
                                   </div>
                               </div>
                               <div id="menulv3urldiv" class="form-group" style="display: none;">
                                   <label class="col-md-3 control-label">页面 URL:</label>
                                   <div class="col-md-9">
                                        <input type="text" id="pageurl" name="pageurl" placeholder="访问地址" class="form-control input-medium">
                                   </div>
                               </div>
                               <div class="form-group">
                                   <label class="col-md-3 control-label">菜单中文名称:</label>
                                   <div class="col-md-9">
                                        <input type="text" id="menuname" name="menuname" placeholder="菜单中文名称" class="form-control input-medium required">
                                   </div>
                               </div>
                               <div class="form-group">
                                   <label class="col-md-3 control-label">排序数字:</label>
                                   <div class="col-md-9">
                                        <input type="text" id="sort" name="sort" placeholder="排序数字" class="form-control input-medium required number">
                                   </div>
                               </div>
                              
                           </div>
                       </form>
                       </div>
                   </div>
               </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-default">放弃</button>
                    <button id="createMenuButton" type="button" onclick="createMenu();" class="btn btn-success">保存</button>
        		</div>
        	</form>
			</div>
		</div>
	</div>
	
	<!-- 新增4级目录(功能) 隐藏DIV -->
	<div id="pagefunctiondiv" tabindex="-1" role="dialog" aria-labelledby="modal-responsive-label" aria-hidden="false" class="modal fade in">
		<div class="modal-dialog">
		<div class="portlet box portlet-blue">
	        <div class="portlet-header">
	            <div class="caption">新增页面功能</div>
	        </div>
	        <div class="portlet-body pan">
	            <form id="menulv4from" name="addmenulv4from" class="form-horizontal form-separated">
	                <div class="form-body pdl">
	                    <div class="form-group">
	                        <label class="col-md-3 control-label">功能名称：</label>
	                        <div class="col-md-8">
	                        	<input type="text" id="actionname" name="actionname" class="form-control required">
	                        	<input type="hidden" id="actionid">
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-3 control-label">功能 URL：</label>
	                        <div class="col-md-8">
	                        	<input type="text" id="actionurl" name="actionurl" class="form-control required">
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-3 control-label">排序数字：</label>
	                        <div class="col-md-8">
	                            <input type="text" id="actionsort" name="actionsort" class="form-control required number">
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-3 control-label">是否是按钮：</label>
	                        <div class="col-md-8">
	                        	<select id="isbutton" name="isbutton" onchange="javascript:isbuttonchange(this);" data-style="btn-white" class="selectpicker form-control show-menu-arrow">
				                   <option value="0">是</option>
				                   <option value="1">不是</option>
			               		</select>
	                        </div>
	                    </div>
	                    <div id="buttonCodeDiv" class="form-group">
	                        <label class="col-md-3 control-label">按钮代码：</label>
	                        <div class="col-md-8">
	                        	<textarea id="actioncode" name="actioncode" rows="2" class="form-control"></textarea>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-md-3 control-label">描述：</label>
	                        <div class="col-md-8">
	                            <textarea id="actionnote" name="actionnote" rows="2" class="form-control"></textarea>
	                        </div>
	                    </div>
	                </div>
	                <div class="form-actions">
	                    <div class="modal-footer">
                    		<button id="hidenpagefunctiondiv" type="button" data-dismiss="modal" class="btn btn-default">放弃</button>
                    		<button id="createActionButton" type="button" onclick="createAction();" class="btn btn-success">保存</button>
                    		<button id="updateActionButton" type="button" onclick="updateAction();" class="btn btn-success">修改</button>
        				</div>
	                </div>
	            </form>
	        </div>
	    </div>
    	</div>
	</div>
	
	<!-- 删除确认框 -->
    <div id="modal-confirm" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">真的要删除这个目录页面吗？如果删除，将无法恢复。</div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-default" >取消</button>
                    <button type="button" data-dismiss="modal" onclick="javascript:delMenu();" class="btn btn-primary">删除</button>
                </div>
            </div>
        </div>
    </div>
                    
</body>

	
</html>